iT邦幫忙

2025 iThome 鐵人賽

DAY 9
0
Modern Web

Medusa.js 石化我的心系列 第 9

Day9 探查基本功能 - 購物車

  • 分享至 

  • xImage
  •  

我個人,已經建立了三個商品以及很多個變體,所以我們來測試我們購物車吧!!
今天我們除了建立購物車,還會測試稅金,會先試試沒有稅金設定的總值以及有稅金設定的總值是否有改變。

建立購物車

在 Medusa.js 框架裡,建構購物車並不是一定需要登入,並不是購買商品就是一定要註冊會員,當然,你也可以限定會員才能購買產品,甚至認證,但是要自己去建構。

所以 Medusa.js 建構購物車是使用 Region(銷售區域) 為基底來創建,這樣以來,就可以在每個地區順便增加稅金以及支付條件。

在 Medusa.js 管理 UI 上面是看不到我們創建 Region 的 ID,所以我們將就一下(為了測試)去資料庫看一下我們的 Region ID。

https://ithelp.ithome.com.tw/upload/images/20250923/20178157hHkaVbm1XH.png

然後去 {baseURL}/store/carts,將以下資料進行輸入

  1. x-publishable-api-key(在 header 中):記得之前建立使用者時候 Day6 有建立過。
  2. RegionID(在body) :{"region_id":"reg_01K430F36VMXWAA308SY1ASNDX"}

以下事例 Post 成功出去後會出現以下資料:

{

"cart": {
	"id": "cart_01K45NP417CSBBHN0BEW737GDB",
	"currency_code": "twd",
	"email": null,
	"region_id": "reg_01K430F36VMXWAA308SY1ASNDX",
	"created_at": "2025-09-02T16:55:41.352Z",
	"updated_at": "2025-09-02T16:55:41.352Z",
	"completed_at": null,
	"total": 0,
	"subtotal": 0,
	"tax_total": 0,
	"discount_total": 0,
	"discount_subtotal": 0,
	"discount_tax_total": 0,
	"original_total": 0,
	"original_tax_total": 0,
	"item_total": 0,
	"item_subtotal": 0,
	"item_tax_total": 0,
	"original_item_total": 0,
	"original_item_subtotal": 0,
	"original_item_tax_total": 0,
	"shipping_total": 0,
	"shipping_subtotal": 0,
	"shipping_tax_total": 0,
	"original_shipping_tax_total": 0,
	"original_shipping_subtotal": 0,
	"original_shipping_total": 0,
	"credit_line_subtotal": 0,
	"credit_line_tax_total": 0,
	"credit_line_total": 0,
	"metadata": null,
	"sales_channel_id": "sc_01K202DJXSM59EKYCMS382SH0Y",
	"shipping_address_id": "caaddr_01K45NP417E3919DBYB245Z27X",
	"customer_id": null,
	"items": [],
	"shipping_methods": [],
	"shipping_address": {
	"id": "caaddr_01K45NP417E3919DBYB245Z27X",
	"first_name": null,
	"last_name": null,
	"company": null,
	"address_1": null,
	"address_2": null,
	"city": null,
	"postal_code": null,
	"country_code": "tw",
	"province": null,
	"phone": null
	},
"billing_address": null,
"credit_lines": [],
"region": {
	"id": "reg_01K430F36VMXWAA308SY1ASNDX",
	"name": "台灣",
	"currency_code": "twd",
	"automatic_taxes": false,
	"countries": [
	{
		"iso_2": "tw",
		"iso_3": "twn",
		"num_code": "158",
		"name": "TAIWAN, PROVINCE OF CHINA",
		"display_name": "Taiwan, Province of China",
		"region_id": "reg_01K430F36VMXWAA308SY1ASNDX",
		"metadata": null,
		"created_at": "2025-08-06T15:53:05.968Z",
		"updated_at": "2025-09-01T16:06:22.180Z",
		"deleted_at": null
	}]
},
"promotions": []
}}

我們把我們 cart 中 id 記住。
再去我們的資料庫把我們建立商品的 id 記住一下。

然後去 /store/carts/你的cartid/line-items輸入以下資料

  • x-publishable-api-key(在 header 當中)
  • {"variant_id":"你的商品id","quantity":1,"metadata": {}}(在 Body 當中)

Post 成功出去後,會看到大量資料,但是我們先注重在以下兩行回來的資料:

  • items:確認是否有加入商品進去購物車。
  • tax_total: 此時是不包含稅金的,因為我們沒有設定稅金。

設定稅金

每個國家銷售商品都有不同的稅率。
在台灣,每月銷售額 10 萬以下者,無課稅。
10 - 20 萬 稅額是 1%。
20 以上等等者 採一般稅額 5% +兩個月需申報一次。

所以 如果是幫企業或者有名頭的品牌創建電商。
除非他的商品定價已經含營業稅金,
我們也可以將稅金附加到 Region 身上。
其實這樣也比較方便。
因為如果是銷售國外 Region 時,也不用重新評估商品定價,直接稅金附上Region。

我們去 Settings -> Tax Regions -> Create 將以下資料進行輸入:

  • Country 國家
  • Tax Provider : 這個目前只能填內建 System ,這個功能主要目的是因為如果有其他地區、國家或者你的商品的稅務是比較複雜的概念,你可以自製一個 運算插件 供 Medusa.js 使用。內建 System 就只是固定稅率。
  • Tax name : 稅務名城
  • Tax rate : 稅額
  • Tax code :分類稅碼,主要是製作 Tax Provider 時,拿取不同稅碼去計算税金。

建立後,他還會問你要不要開啟Sublevels(子領域功能)以及覆寫功能。

  • Sublevels(子領域):這功能主要是台灣用不到,那我們來看看美國,除了國家會有稅金,還有各州會有稅金,甚至城市也有可能有稅金在裡頭,所以 Sublevels 就很有用了。
  • Overrides(複寫):這功能主要目標是產品、產品類型進行稅率調整。

下圖是我增加的稅率
https://ithelp.ithome.com.tw/upload/images/20250923/20178157IdpWeBAt2f.png

增加完後,因為稅金是附加在 Region 身上,然後我又沒有增加什麼條件上去。
所以我們去讓我們剛剛的購物車計算一下我們的稅金。
{{baseUrl}}/store/carts/你的cart_id/taxes 增加 x-publishable-api-key
在 header 就好,然後 Post 出去。

就會看到

  • tax_total : 2.5 (因為我商品是 125 元)

下集預告

照理來說,下集就會測試一下 付款 以及 訂單建立。
但是 付款 是最嚴謹的部分,這部分在基本功能中,有一個專屬的流程。
接下來的兩天,我會先說明一下有關於付款的流程,
然後,利用系統內定的付款功能,這功能就是 人收到錢自己結單的功能,
進行測試付款流程。


上一篇
Day8 探查基本功能 - 探索購物車前準備完整的商品及區域
系列文
Medusa.js 石化我的心9
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言